<template>
    <div id="home">
        <div class="switchMapView">
            <Button @click="setBaidu">百度</Button>
            <Button @click="setGoogle">谷歌</Button>
            <Button @click="setAMap">高德</Button>
        </div>
        <div id="map" style="height:800px;"></div>
    </div>
</template>

<script>
    
    import * as maptalks from 'maptalks'
    import car from './img/3.png'
    export default {
        name:'Home',

        data(){
            return {
                map:null
            }
        },

        mounted() {

                this.baseLayer = new maptalks.TileLayer('base', {
                        urlTemplate: "http://mt2.google.cn/vt?lyrs=m@180000000&hl=zh-CN&gl=cn&src=app&x={x}&y={y}&z={z}&s=Gal",
                        attribution:  ''
                    })
                this.map = new maptalks.Map('map', {
                    center: [106,36.11],
                    zoom: 5,
                    minZoom:4,
                    maxZoom:18,
                   baseLayer:this.baseLayer
                });
                map = this.map;


                
                var point = new maptalks.Marker(
                    [114.22,23],
                    {
                        visible : true,
                        editable : true,
                        cursor : 'pointer',
                        shadowBlur : 0,
                        shadowColor : 'black',
                        draggable : false,
                        dragShadow : false, // display a shadow during dragging
                        drawOnAxis : null,  // force dragging stick on a axis, can be: x, y
                       'symbol': [
                           {
                            'markerFile'   : car,
                            'markerWidth'  : 25,
                            'markerHeight' : 25
                            },
                            {
                                'textFaceName' : 'sans-serif',
                                'textName' : '12121',
                                'textSize' : 14,
                                'textDy'   : 24
                            }
                       ]
                    }
                );
                var point1 = new maptalks.Marker(
                    [114.23,23],
                    {
                        visible : true,
                        editable : true,
                        cursor : 'pointer',
                        shadowBlur : 0,
                        shadowColor : 'black',
                        draggable : false,
                        dragShadow : false, // display a shadow during dragging
                        drawOnAxis : null,  // force dragging stick on a axis, can be: x, y
                       'symbol': [
                           {
                            'markerFile'   : car,
                            'markerWidth'  : 25,
                            'markerHeight' : 25
                            },
                            {
                                'textFaceName' : 'sans-serif',
                                'textName' : 'xiaoxu',
                                'textSize' : 14,
                                'textDy'   : 24
                            }
                       ]
                    }
                );


                var coordinate = map.getCenter().toFixed(3);
  
                var options = {
                    //'autoOpenOn' : 'click',  //set to null if not to open window when clicking on map
                    'single' : false,
                    'width'  : 183,
                    'height' : 105,
                    'custom' : true,
                    'dx' : -3,
                    'dy' : -12,
                    'content' : '<div class="content">' +
                        '<div class="pop_title">Custom InfoWindow</div>' +
                        '<div class="pop_time">' + new Date().toLocaleTimeString() + '</div><br>' +
                        '<div class="pop_dept">' + coordinate.x + '</div>' +
                        '<div class="pop_dept">' + coordinate.y + '</div>' +
                        '<div class="arrow"></div>' +
                    '</div>'
                };
                var infoWindow = new maptalks.ui.InfoWindow(options);
                infoWindow.addTo(map);

                new maptalks.VectorLayer('vector', [this.createMarker(114,22,"束带结发",'121212'),point1]).addTo(map);    
        },
            
        methods: {
            createMarker(lat,lon,deviceName,deviceid){
                 var marker = new maptalks.Marker(
                    [lat,lon],
                    {
                        visible : true,
                        editable : true,
                        cursor : 'pointer',
                        shadowBlur : 0,
                        shadowColor : 'black',
                        draggable : false,
                        dragShadow : false, // display a shadow during dragging
                        drawOnAxis : null,  // force dragging stick on a axis, can be: x, y
                       'symbol': [
                           {
                            'markerFile'   : car,
                            'markerWidth'  : 25,
                            'markerHeight' : 25
                            },
                            {
                                'textFaceName' : 'sans-serif',
                                'textName' : deviceName,
                                'textSize' : 14,
                                'textDy'   : 24
                            }
                       ]
                    }
                ); 
                marker.deviceid = deviceid;
                return  marker ;
            },
            setBaidu(){
                var  baseLayer = new maptalks.TileLayer('base', {
                    'urlTemplate' : 'http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1',
                    'subdomains'  : [0,1,2,3,4,5,6,7,8,9],
                    'attribution' :  '&copy; <a target="_blank" href="http://map.baidu.com">Baidu</a>'
                })
                map.setSpatialReference({projection : 'baidu'});
                this.map.setBaseLayer(baseLayer);
            },
            setGoogle(){
                var baseLayer = new maptalks.TileLayer('base', {
                    urlTemplate: "http://mt2.google.cn/vt?lyrs=m@180000000&hl=zh-CN&gl=cn&src=app&x={x}&y={y}&z={z}&s=Gal",
                })
                map.setSpatialReference({});
                this.map.setBaseLayer(baseLayer);
            },
            setAMap(){
                var baseLayer = new maptalks.TileLayer('base', {
                    urlTemplate: 'http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&style=8&x={x}&y={y}&z={z}',
                })
                map.setSpatialReference({})
                this.map.setBaseLayer(baseLayer);
            }
        }
    }
</script>

<style scoped lang="less">
    #home, #map{
         width:100%;
         height: 100%;
     }
    .switchMapView{
        position:absolute;
        right: 10px;
        top: 70px;
        z-index: 9999;
    }

 
</style>